<template>
  <div class="mod-config">
    <el-form :inline="true"
             :model="dataForm"
             @keyup.enter.native="getDataList()">
      <el-form-item>
        <!-- <el-input v-model="dataForm.key"
                  placeholder="请输入会员卡号"
                  clearable></el-input> -->
        <el-input placeholder="请输入内容"
                  v-model="dataForm.key"
                  class="input-with-select"
                  clearable>
          <el-select v-model="selectQuery"
                     slot="prepend">
            <el-option v-for="item in selectOps.querys"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
          <!-- <el-button slot="append"
                         icon="el-icon-search"
                         @click="getDataList()"></el-button> -->
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList"
              border
              stripe
              size="small"
              v-loading="dataListLoading"
              style="width: 100%;">
      <el-table-column prop="id"
                       header-align="center"
                       align="center"
                       label="#"
                       width="60">
      </el-table-column>
      <el-table-column prop="memberName"
                       header-align="center"
                       align="center"
                       label="姓名">
      </el-table-column>
      <el-table-column prop="cardNumber"
                       header-align="center"
                       align="center"
                       label="会员卡号">
      </el-table-column>
      <el-table-column prop="cardTypeName"
                       header-align="center"
                       align="center"
                       label="卡类型">
      </el-table-column>
      <el-table-column prop="punchTime"
                       header-align="center"
                       align="center"
                       label="打卡时间">
        <template slot-scope="scope">
          {{scope.row.punchTime | formatDate('yyyy-MM-dd hh:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column prop="createdBy"
                       header-align="center"
                       align="center"
                       label="操作人">
      </el-table-column>
      <el-table-column fixed="right"
                       header-align="center"
                       align="center"
                       width="100"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="danger"
                     size="mini"
                     @click="deleteHandle(scope.row.id, scope.row.cardNumber)"
                     v-if="isAuth('member:attendance-list:del')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle"
                   @current-change="currentChangeHandle"
                   :current-page="pageIndex"
                   :page-sizes="[10, 20, 50, 100]"
                   :page-size="pageSize"
                   :total="totalPage"
                   background
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <!-- <add-or-update v-if="addOrUpdateVisible"
                   ref="addOrUpdate"
                   @refreshDataList="getDataList"></add-or-update> -->
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'

export default {
  data () {
    return {
      selectQuery: 'memberName',
      selectOps: {
        // 指定的搜索字段数据
        querys: [
          { id: 'memberName', name: '会员姓名' },
          { id: 'cardNumber', name: '会员卡号' }
        ]
      },
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    // AddOrUpdate
  },
  filters: {
    formatDate (time, format = 'yyyy-MM-dd') {
      var date = new Date(time * 1000)
      return formatDate(date, format)
    }
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      // 组装查询请求参数
      let params = {
        'page': this.pageIndex,
        'limit': this.pageSize
      }
      if (this.selectQuery) {
        params[this.selectQuery] = this.dataForm.key
        // console.log(params)
      }
      this.$http({
        url: this.$http.adornUrl('/member/attendance/list'),
        method: 'get',
        params: this.$http.adornParams(params)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    // addOrUpdateHandle (id) {
    //   this.addOrUpdateVisible = true
    //   this.$nextTick(() => {
    //     this.$refs.addOrUpdate.init(id)
    //   })
    // },
    // 删除
    deleteHandle (id, cardNumber) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(`/member/attendance/delete/${cardNumber}`),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    }
  }
}
</script>
<style scoped>
.el-select {
  width: 105px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>